<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0
        }

        nav {
            width: 100%;
            height: 54px;
            margin-top: 100px;
            border: 1px solid #E3E7E8;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            height: 54px;
        }

        ul {
            display: flex;
            margin-right: 90px;
        }

        li {
            list-style: none;
            margin: 5px auto;
            margin-top: 1px;
        }

        a {

            text-decoration: none;
            color: #555;
            font-size: 15px;
        }

        a:hover {
            color: red;
        }

        .first {
            display: block;
            height: 35px;
            color: #2fb3ff;
            border-bottom: 1px solid #2fb3ff;
        }

        .active {
            margin: 0;
            padding: 0;
            display: block;
            position: absolute;
            /* margin-top: 20px; */
            border: 1px solid #ebebeb;
            width: 200px;
            margin-left: -67px;
            margin-top: 15px;
            box-shadow: 4px 7px 15px rgba(0, 0, 0, 0.3);
            display: none;
        }

        .active li {
            display: inline-block;
            width: 85px;
            height: 30px;
            margin: 0 0 0 10px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        span {
            display: block;
            width: 15px;
            height: 15px;
            background-image: url(header_3091d80.png);
            background-position: -110px 0;
            margin-left: 71px;
            margin-top: -9px;
            border-bottom: 0;
        }

        li:hover .active {
            display: block;
        }

        .current {
            margin: 0;
            padding: 0;
            display: block;
            position: absolute;
            /* margin-top: 20px; */
            border: 1px solid #ebebeb;
            width: 200px;
            margin-left: -67px;
            margin-top: 15px;
            box-shadow: 4px 7px 15px rgba(0, 0, 0, 0.3);
             display: none; 
        }

        .current li {
            display: inline-block;
            width: 85px;
            height: 30px;
            margin: 0 0 0 10px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .img {
            display: block;
            width: 15px;
            height: 15px;
            background-image: url(header_3091d80.png);
            background-position: -110px 0;
            margin-left: 71px;
            margin-top: -9px;
            border-bottom: 0;
        }
         li:hover .current{
              display: block;
         }
          .cjl{
             margin: 0;
            padding: 0;
            display: block;
            position: absolute;
            
            border: 1px solid #ebebeb;
            width: 200px;
            margin-left: -67px;
            margin-top: 15px;
            box-shadow: 4px 7px 15px rgba(0, 0, 0, 0.3);
             display: none; 
         }
         .cjl li{
              display: inline-block;
            width: 85px;
            height: 30px;
            margin: 0 0 0 10px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
         }
        .cjl1{
            display: block;
            width: 15px;
            height: 15px;
            background-image: url(header_3091d80.png);
            background-position: -110px 0;
            margin-left: 71px;
            margin-top: -9px;
            border-bottom: 0;
        }
         li:hover .cjl{
              display: block;
         } 
         .cjl2{
             margin: 0;
            padding: 0;
            display: block;
            position: absolute;
            
            border: 1px solid #ebebeb;
            width: 200px;
            margin-left: -67px;
            margin-top: 15px;
            box-shadow: 4px 7px 15px rgba(0, 0, 0, 0.3);
             display: none; 
         }
         .cjl2 li{
              display: inline-block;
            width: 85px;
            height: 30px;
            margin: 0 0 0 10px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
         }
        .cjl3{
            display: block;
            width: 15px;
            height: 15px;
            background-image: url(header_3091d80.png);
            background-position: -110px 0;
            margin-left: 71px;
            margin-top: -9px;
            border-bottom: 0;
        }
         li:hover .cjl2{
              display: block;
         } 
         .cjl4{
             margin: 0;
            padding: 0;
            display: block;
            position: absolute;
            
            border: 1px solid #ebebeb;
            width: 150px;
            margin-left: -67px;
            margin-top: 15px;
            box-shadow: 4px 7px 15px rgba(0, 0, 0, 0.3);
             display: none; 
         }
         .cjl4 li{
              display: inline-block;
            width: 85px;
            height: 30px;
            margin: 0 0 0 10px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
         }
        .cjl5{
            display: block;
            width: 15px;
            height: 15px;
            background-image: url(header_3091d80.png);
            background-position: -110px 0;
            margin-left: 71px;
            margin-top: -9px;
            border-bottom: 0;
        }
         li:hover .cjl4{
              display: block;
         } 
         section{
             display: block;
            width: 15px;
            height: 8px;
            background-image: url(header_3091d80.png);
            background-position: -55px 0;
            margin-left: 26px;
            margin-top: -10px;
            border-bottom: 0;
            transition: all  0.2s linear;
         }
         section:hover{
            
             transform:rotate(180deg) ;
         }
         
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <ul>
                <li><a href="href#" class="first">首页</a></li>
                <li>
                    <a href="href#">剧集</a>
                    <ul class="active">
                        <span></span>
                        <li class="arrow"><a title="楚乔传 TV版" href="href#">楚乔传 TV版</a></li>
                        <li><a title="春风十里不如你" href="href#">春风十里不如你</a></li>
                        <li><a title="镇魂街 第一季" href="href#">镇魂街 第一季</a></li>
                        <li><a title="我的前半生" href="href#">我的前半生</a></li>
                        <li><a title="醉玲珑" href="href#">醉玲珑</a></li>
                        <li><a title="微微一笑很倾城" href="href#">微微一笑很倾城</a></li>
                        <li><a title="终极三国2017" href="href#">终极三国2017</a></li>
                        <li><a title="三生三世十里桃花" href="href#">三生三世十里桃花</a></li>
                    </ul>
                </li>
                <li>
                    <a href="href#">电影</a>
                    <ul class="current">
                        <span class="img"></span>
                        <li><a href="href#" type="速度与激情8">速度与激情8</a></li>
                        <li><a href="href#" type="人间大炮">人间大炮</a></li>
                        <li><a href="href#" type="战狼">战狼</a></li>
                        <li><a href="href#" type="杀破狼2">杀破狼2</a></li>
                        <li><a href="href#" type="逆时营救">逆时营救</a></li>
                        <li><a href="href#" type="记忆大师">记忆大师</a></li>
                        <li><a href="href#" type="我的外星女友">我的外星女友</a></li>
                        <li><a href="href#" type="有部电影">有部电影</a></li>
                    </ul>
                </li>
                <li>
                    <a href="href#">综艺</a>
                     <ul class="cjl">
                         <span class="cjl1"></span>
                        <li><a href="#" type="极限挑战 第三季">极限挑战 第三季</a></li>
                        <li><a href="#" type="挑战者联盟 第三季">挑战者联盟 第三季</a></li>
                        <li><a href="#" type="脑大洞开 第一季">脑大洞开 第一季</a></li>
                        <li><a href="#" type="火星情报局 第三季	">火星情报局 第三季	</a></li>
                        <li><a href="#" type="暴走漫画—暴走大事件 第五季">暴走漫画—暴走大事件 第五季</a></li>
                        <li><a href="#" type="日日煮 2017">日日煮 2017</a></li>
                        <li><a href="#" type="开心剧乐部 第一季">开心剧乐部 第一季</a></li>
                        <li><a href="#" type="举杯呵呵喝 2017">举杯呵呵喝 2017</a></li>
                    </ul>
                </li>
                <li><a href="href#">音乐</a></li>
                <li>
                    <a href="href#">少儿</a>
                    <ul class="cjl2">
                        <span class="cjl3"></span>
                        <li><a href="#" type="小猪佩奇">小猪佩奇</a></li>
                        <li><a href="#" type="宝狄与好友之梦想英雄">宝狄与好友之梦想英雄</a></li>
                        <li><a href="#" type="京剧猫之信念的冒险">京剧猫之信念的冒险</a></li>
                        <li><a href="#" type="汪汪队立大功 第二季">汪汪队立大功 第二季</a></li>
                        <li><a href="#" type="我的汤姆猫短片">我的汤姆猫短片</a></li>
                        <li><a href="#" type="会说话的家族">会说话的家族</a></li>
                        <li><a href="#" type="小伶玩具">小伶玩具</a></li>
                        <li><a href="#" type="纳米核心 第三季">纳米核心 第三季</a></li>
                    </ul>
                </li>
                <li><a href="href#">来疯</a></li>
                <li><a href="href#">直播</a></li>
                <li><a href="href#">片库</a></li>
                <li><a href="href#">资讯</a></li>
                <li><a href="href#">纪实</a></li>
                <li><a href="href#">公益</a></li>
                <li><a href="href#">体育</a></li>
                <li><a href="href#">汽车</a></li>
                <li><a href="href#">科技</a></li>
                <li><a href="href#">财经</a></li>
                <li><a href="href#">娱乐</a></li>
                <li><a href="href#">文化</a></li>
                <li><a href="href#">动漫</a></li>
                <li><a href="href#">搞笑</a></li>
                <li><a href="href#">旅游</a></li>
                <li><a href="href#">时尚</a></li>
                <li><a href="href#">亲子</a></li>
                <li><a href="href#">教育</a></li>
                <li><a href="href#">游戏</a></li>
                <li>
                    <a href="href#">更多</a>
                    <section ></section>
                    <ul class="cjl4">
                        <span cjl5></span>
                        <li><a href="#" type="VR">VR</a></li>
                        <li><a href="#" type="生活">生活</a></li>
                        <li><a href="#" type="原创">原创</a></li>
                        <li><a href="#" type="排行">排行</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>
<script>




</script>